<template>
  <div class="customer">
    <div class="visit_record_search">
      <div class="blockMould">
        <div class="show_search" v-if="is_show_fixed_search">
          <!--项目-->
          <div class="search_list">
            <span class="search_text">项目名称：</span>
            <el-select size="small" multiple collapse-tags v-model="project" placeholder="请选择">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--是否接通-->
          <div class="search_list">
            <span class="search_text">是否接通：</span>
            <el-select size="small" multiple collapse-tags v-model="isTtConnected" placeholder="请选择">
              <el-option v-for="item in isTtConnectedLsist" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--医生-->
          <div class="search_list">
            <span class="search_text">医生信息：</span>
            <el-input size="small" placeholder="输入医生ID/医生姓名" v-model="doctor"></el-input>
          </div>
          <!--项目成员-->
          <div class="search_list">
            <span class="search_text">项目成员：</span>
            <el-select size="small" multiple collapse-tags v-model="projectMembers" placeholder="请选择">
              <el-option v-for="item in projectMembersList" :key="item.repId" :label="item.name"
                         :value="item.repId"></el-option>
            </el-select>
          </div>
          <!--拜访目的-->
          <div class="search_list">
            <span class="search_text">拜访目的：</span>
            <el-select size="small" multiple collapse-tags v-model="purposeOfTheVisit" placeholder="请选择">
              <el-option v-for="item in purposeOfTheVisitList" :key="item.resourceValue" :label="item.resourceItem"
                         :value="item.resourceValue" :disabled="item.disabled"></el-option>
            </el-select>
          </div>
          <!--号码来源-->
          <div class="search_list">
            <span class="search_text">号码来源：</span>
            <el-select size="small" v-model="numberSource" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in numberSourceList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--拜访结果-->
          <div class="search_list">
            <span class="search_text">拜访结果：</span>
            <el-select size="small" multiple collapse-tags v-model="visitResults" placeholder="请选择">
              <el-option v-for="item in visitResultsList" :key="item.resourceValue" :label="item.resourceItem"
                         :value="item.resourceValue"></el-option>
            </el-select>
          </div>
        </div>
        <div class="show_search" v-if="is_show_all_search">
          <!--项目-->
          <div class="search_list">
            <span class="search_text">项目名称：</span>
            <el-select size="small" multiple collapse-tags v-model="project" placeholder="请选择">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--是否接通-->
          <div class="search_list">
            <span class="search_text">是否接通：</span>
            <el-select size="small" multiple collapse-tags v-model="isTtConnected" placeholder="请选择">
              <el-option v-for="item in isTtConnectedLsist" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--医生-->
          <div class="search_list">
            <span class="search_text">医生信息：</span>
            <el-input size="small" placeholder="输入医生ID/医生姓名" v-model="doctor"></el-input>
          </div>
          <!--项目成员-->
          <div class="search_list">
            <span class="search_text">项目成员：</span>
            <el-select size="small" multiple collapse-tags v-model="projectMembers" placeholder="请选择">
              <el-option v-for="item in projectMembersList" :key="item.repId" :label="item.name"
                         :value="item.repId"></el-option>
            </el-select>
          </div>
          <!--拜访目的-->
          <div class="search_list">
            <span class="search_text">拜访目的：</span>
            <el-select size="small" multiple collapse-tags v-model="purposeOfTheVisit" placeholder="请选择">
              <el-option v-for="item in purposeOfTheVisitList" :key="item.resourceValue" :label="item.resourceItem"
                         :value="item.resourceValue" :disabled="item.disabled"></el-option>
            </el-select>
          </div>
          <!--号码来源-->
          <div class="search_list">
            <span class="search_text">号码来源：</span>
            <el-select size="small" v-model="numberSource" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in numberSourceList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <!--拜访结果-->
          <div class="search_list">
            <span class="search_text">拜访结果：</span>
            <el-select size="small" multiple collapse-tags v-model="visitResults" placeholder="请选择">
              <el-option v-for="item in visitResultsList" :key="item.resourceValue" :label="item.resourceItem"
                         :value="item.resourceValue"></el-option>
            </el-select>
          </div>
          <!--项目标签-->
          <div class="search_list">
            <span class="search_text">项目标签：</span>
            <el-select size="small" multiple collapse-tags v-model="itemLabel" value-key="id" placeholder="请选择">
              <el-option v-for="item in itemLabellList" :key="item.id" :label="item.tagName"
                         :value="item"></el-option>
            </el-select>
          </div>
          <!--基础标签-->
          <div class="search_list">
            <span class="search_text">基础标签：</span>
            <el-select size="small" multiple collapse-tags v-model="basicLabel" value-key="id" placeholder="请选择">
              <el-option-group
                v-for="group in basicLabelList"
                :key="group.resourceValue"
                :label="group.resourceItem">
                <el-option
                  v-for="item of group.options"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item">
                </el-option>
              </el-option-group>
            </el-select>
          </div>
          <!--通话时长-->
          <div class="search_list call_duration">
            <span class="search_text">通话时长：</span>
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      width="50"
                      v-model="startTime"></el-input>
            秒
            <span style="padding: 0 10px">-</span>
            <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                      width="50"
                      v-model="endTime"></el-input>
            秒
          </div>
          <!--外呼开始时间-->
          <div class="search_list call_start_time">
            <span class="search_text">外呼开始时间：</span>
            <el-date-picker
              size="small"
              v-model="outboundCallTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <!--基础标签>下拉-->
          <div style="display: inline-block" v-for="hospital of radioList">
            <div class="search_list" v-if="hospital.tagType =='radio'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-select size="small" v-model="hospital.val" placeholder="请选择" value-key="id">
                <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                           :value="item"></el-option>
              </el-select>
            </div>
            <div class="search_list" v-if="hospital.tagType =='checkbox'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-select size="small" multiple collapse-tags v-model="hospital.val" placeholder="请选择" value-key="id">
                <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                           :value="item"></el-option>
              </el-select>
            </div>
            <div class="search_list" v-if="hospital.tagType =='number'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                        v-model="hospital.val"></el-input>
            </div>
            <div class="search_list" v-if="hospital.tagType =='text'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-input type="text" size="small" v-model="hospital.val"></el-input>
            </div>
          </div>
          <!--项目标签>下拉-->
          <div style="display: inline-block" v-for="hospital of choiceItemLabellList">
            <div class="search_list" v-if="hospital.tagType =='radio'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-select size="small" v-model="hospital.val" placeholder="请选择" value-key="id">
                <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                           :value="item"></el-option>
              </el-select>
            </div>
            <div class="search_list" v-if="hospital.tagType =='checkbox'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-select size="small" multiple collapse-tags v-model="hospital.val" placeholder="请选择" value-key="id">
                <el-option v-for="item in hospital.list" :key="item.id" :label="item.optionName"
                           :value="item"></el-option>
              </el-select>
            </div>
            <div class="search_list" v-if="hospital.tagType =='number'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-input type="text" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')" size="small"
                        v-model="hospital.val"></el-input>
            </div>
            <div class="search_list" v-if="hospital.tagType =='text'">
              <span class="search_text">{{ hospital.title }}：</span>
              <el-input type="text" size="small" v-model="hospital.val"></el-input>
            </div>
          </div>
        </div>
      </div>
      <el-button icon="el-icon-arrow-down" v-if="is_show_fixed_search" @click="showAllSearch"></el-button>
      <el-button icon="el-icon-arrow-up" v-if="is_show_all_search" @click="showFixedSearch"></el-button>
    </div>
    <!--表格-->
    <div class="list blockMould visit_record_list">
      <div class="list_head_button">
        <div class="search_button">
          <el-tooltip popper-class="export_button_promit" effect="dark" content="每次导出数据不能超过1万条记录" placement="top">
            <el-button size="mini" type="warning" plain @click="downloadEasyExcel()" :disabled="disabled">导出拜访记录
            </el-button>
          </el-tooltip>
        </div>
        <div class="search_name">
          <el-button size="mini" type="primary" @click="query()">查询</el-button>
          <el-button size="mini" plain @click="reset()">重置</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
        :data="visitRecordList">
        <el-table-column label="通话ID" min-width="55" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.callId }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="医生"
          min-width="85">
          <template slot-scope="scope">
            <div><span class="item">姓名：</span><span style="color:rgba(42, 130, 226, 1);cursor: pointer;"
                                                    @click="getDoctorInfo(scope.row)">{{ scope.row.doctorName }}</span>
            </div>
            <div><span class="item">VRID：</span>{{ scope.row.vrid }}</div>
            <div><span class="item">职称：</span>{{ scope.row.techTitle }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="医院-科室"
          min-width="140">
          <template slot-scope="scope">
            <div><span class="item">医院：</span>{{ scope.row.hospitalName }}</div>
            <div><span class="item">科室：</span>{{ scope.row.depart }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="项目"
          min-width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="拜访信息"
          min-width="120">
          <template slot-scope="scope">
            <div><span class="item">代表：</span>{{ scope.row.repName }}</div>
            <div><span class="item">拜访目的：</span>{{ scope.row.purposeItem }}</div>
            <div><span class="item">拜访结果：</span>{{ scope.row.resultItem }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="拜访类型">
          <template slot-scope="scope">
            <div>{{ scope.row.isVisitCheckIn == 1 ? '拜访登记' : '电话呼出' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="通话信息"
          min-width="180">
          <template slot-scope="scope">
            <div><span class="item">通话状态：</span>
              <span v-if="scope.row.callStatus==1">接通</span>
              <span v-else>未接通</span>
            </div>
            <div><span class="item">外呼开始时间：</span>{{ scope.row.operationTime }}</div>
            <div><span class="item">通话时长：</span>{{ scope.row.callDuration }}s</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="60">
          <template slot-scope="scope">
            <div>
              <el-tooltip popper-class="operation_button_promit" effect="dark" content="查看录音" placement="bottom">
                <el-button @click="show_recording(scope.row)" type="text">
                  <img src="../../assets/common/show_recording.svg" alt="">
                </el-button>
              </el-tooltip>
              <el-tooltip popper-class="operation_button_promit" effect="dark" content="下载录音" placement="bottom">
                <el-button type="text" v-if="scope.row.tapeUri">
                  <a :href="scope.row.tapeUri" target="_blank" download>
                    <img src="../../assets/common/download_recording.svg" alt="">
                  </a>
                </el-button>
              </el-tooltip>
              <el-tooltip popper-class="operation_button_promit" effect="dark" content="下载录音" placement="bottom">
                <el-button type="text" v-if="!scope.row.tapeUri" @click="download_recording_promit">
                  <a><img src="../../assets/common/download_recording.svg" alt=""></a>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
    </div>
    <!-- 展示录音详情 -->
    <div class="show_recording" v-if="is_show_recording">
      <div class="contain">
        <div class="title">
          <span>录音详情</span>
          <i class="el-icon-close" @click="close_recording"></i>
        </div>
        <div class="content">
          <div class="audio_content" v-if="recording_url">
            <div class="play_button" @click="changePlay">
              <img v-if="audio.play" src="../../assets/common/play.png" alt="" style="width:40px;height:40px;">
              <img v-else src="../../assets/common/stop.png" alt="" style="width:40px;height:40px;">
            </div>
            <div class="audio_number">
              <span>录音{{ recording_number }}</span>
            </div>
            <div class="audio_slider">
              <el-slider
                v-model="audio.audio_slider"
                :show-tooltip="false"
                :format-tooltip="formatProcessToolTip"
                @input="changeCurrentTime"></el-slider>
              <div class="audio_time">
                <span>{{ parseInt(audio.currentTime) | formatAudioTime }}</span>
                <span>{{ parseInt(audio.duration) | formatAudioTime }}</span>
              </div>
            </div>
            <audio
              :src="recording_url"
              ref="audio"
              @timeupdate="onTimeUpdate"
              @loadedmetadata="onLoadedMetaData"
            ></audio>
          </div>
          <div class="audio_content" v-if="!recording_url" style="margin-top:54px;color:#C0C4CC">
            <span>暂无录音</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边弹框 -->
    <drawer/>
    <!-- 拜访登记 -->
    <phone/>
  </div>
</template>

<script>
import {api, baseAjax} from '../../api/api';
import pagination from '../public/pagination';
import {formatTime} from "../../utils/validate";
import {url, httpExcel} from '../../api/http'
import {statusCode} from '@/utils/index.js';
import Cookies from 'js-cookie';
import bus from '../../assets/js/eventBus';
import drawer from '../../element/drawer';
import phone from '../../element/phone';

export default {
  components: {pagination, drawer, phone},
  computed: {},
  data() {
    return {
      /*项目*/
      project: [],
      projectList: [],
      /*项目成员*/
      projectMembers: [],
      projectMembersList: [],
      /*项目标签*/
      itemLabel: [],
      itemLabellList: [],
      /*基础标签*/
      basicLabel: [],
      basicLabelList: [],
      /*基础标签>下拉*/
      radioList: [],
      /*项目标签>下拉*/
      choiceItemLabellList: [],
      /*号码来源*/
      numberSource: [],
      numberSourceList: [
        {
          id: 1,
          name: 'VR电话',
        },
        {
          id: 2,
          name: '非VR电话',
        },
      ],
      /*拜访目的*/
      purposeOfTheVisit: [],
      purposeOfTheVisitList: [],
      /*拜访结果*/
      visitResults: [],
      visitResultsList: [],
      /*是否接通*/
      isTtConnected: [],
      isTtConnectedLsist: [
        {
          id: 0,
          name: '未接通',
        },
        {
          id: 1,
          name: '接通',
        },
      ],
      /*医生*/
      doctor: '',
      /*通话时长*/
      startTime: '',
      endTime: '',
      /*外呼开始时间*/
      outboundCallTime: '',
      /*拜访记录列表*/
      visitRecordList: [],
      //分页
      page: {
        currentPage: 1,    //当前页
        pageSize: 10,    //每页显示条数
        totalPage: null,   //总页数
        total: null    //总条数
      },
      //是否展示录音详情弹框
      is_show_recording: false,
      //录音
      audio: {
        play: false,   //是否播放
        currentTime: 0,   //当前播放时间
        duration: 0,  //录音总时长
        audio_slider: 0
      },
      recording_url: '',  //录音url
      recording_number: '',   //录音编号
      is_show_all_search: false,   //是否显示所有的搜索框
      is_show_fixed_search: true,    //是否显示固定的搜索框

      //disabled
      disabled: false,
      loading: true
    }
  },
  watch: {
    //项目联动 - 项目成员、项目标签
    project() {
      if (this.project.length > 0) {
        this.projectMembers = [];
        this.itemLabel = [];
        this.getRepNamebyProductId()
        this.tag_product_info_list()
      } else {
        this.projectMembers = []
        this.projectMembersList = []
        this.itemLabel = []
        this.itemLabellList = []
      }
    },
    //拜访目的联动 - 拜访结果
    purposeOfTheVisit() {
      if (this.purposeOfTheVisit.length > 0) {
        if (this.purposeOfTheVisit.includes('1')) {
          this.purposeOfTheVisitList.map((res) => {
            if (res.resourceValue == '1') {
              res.disabled = false;
            } else {
              res.disabled = true;
            }
          });
          this.getReoureItem('result_type_a')
        } else {
          this.purposeOfTheVisitList.map((res) => {
            if (res.resourceValue == '1') {
              res.disabled = true;
            } else {
              res.disabled = false;
            }
          });
          this.getReoureItem('result_type_b')
        }
      } else {
        this.purposeOfTheVisitList.map((res) => {
          res.disabled = false;
        });
        this.visitResults = [];
        this.visitResultsList = [];
      }
    },
    //基础标签 >类型标签
    basicLabel() {
      if (this.basicLabel.length > 0) {
        this.basicLabel.map((data) => {
          this.tag_base_option_list(data.id, data.tagName, data.tagType)
        })
      } else {
        this.radioList = []
      }
    },
    //项目标签>下拉
    itemLabel() {
      if (this.itemLabel.length > 0) {
        this.itemLabel.map((data) => {
          this.getChoiceItemLabellList(data.id, data.tagName, data.tagType)
        })
      } else {
        this.choiceItemLabellList = []
      }
    }
  },
  mounted() {
    this.visitRecordData()
    this.getAllProductInfo()
    this.getReoureItem('purpose_type')
    this.tag_base_info()
  },
  methods: {
    //数据
    data() {
      let tagBaseList = []
      this.radioList.map((data) => {
        if (data.tagType == 'checkbox') {
          data.val.map((val) => {
            tagBaseList.push({
              maxNum: '',
              minNum: '',
              optionId: val.id,
              optionName: val.optionName,
              tagId: val.tagId,
              tagType: val.tagType,
            })
          })
        } else if (data.tagType == 'radio') {
          tagBaseList.push({
            maxNum: '',
            minNum: '',
            optionId: data.val.id,
            optionName: data.val.optionName,
            tagId: data.val.tagId,
            tagType: data.val.tagType,
          })
        } else if (data.tagType == 'number') {
          tagBaseList.push({
            maxNum: '',
            minNum: data.val,
            optionId: '',
            optionName: '',
            tagId: data.id,
            tagType: data.tagType,
          })
        } else if (data.tagType == 'text') {
          tagBaseList.push({
            maxNum: '',
            minNum: '',
            optionId: '',
            optionName: data.val,
            tagId: data.id,
            tagType: data.tagType,
          })
        }
      })
      let tagProductList = []
      this.choiceItemLabellList.map((data) => {
        if (data.tagType == 'checkbox') {
          data.val.map((val) => {
            tagProductList.push({
              maxNum: '',
              minNum: '',
              optionId: val.id,
              optionName: val.optionName,
              tagId: val.tagId,
              tagType: data.tagType,
            })
          })
        } else if (data.tagType == 'radio') {
          tagProductList.push({
            maxNum: '',
            minNum: '',
            optionId: data.val.id,
            optionName: data.val.optionName,
            tagId: data.val.tagId,
            tagType: data.tagType,
          })
        } else if (data.tagType == 'number') {
          tagProductList.push({
            maxNum: '',
            minNum: data.val,
            optionId: '',
            optionName: '',
            tagId: data.id,
            tagType: data.tagType,
          })
        } else if (data.tagType == 'text') {
          tagProductList.push({
            maxNum: '',
            minNum: '',
            optionId: '',
            optionName: data.val,
            tagId: data.id,
            tagType: data.tagType,
          })
        }
      })
      let obj = {
        productIdList: this.project,
        repIdList: this.projectMembers,
        tbdoTagIdList: [],
        tbdoOptionIdList: [],
        tpdoTagIdList: [],
        tpdoOptionIdList: [],
        callSourceList: this.numberSource,
        purposePesourcesIdList: this.purposeOfTheVisit,
        resultResourcesIdList: this.visitResults,
        callStatusList: this.isTtConnected,
        currentPage: this.page.currentPage,
        totalPage: this.page.totalPage,
        pageSize: this.page.pageSize,
        startRows: '',
        contactOrName: this.doctor,
        callDurationGt: this.startTime,
        callDurationIt: this.endTime,
        operationTimeGt: this.outboundCallTime ? this.outboundCallTime[0] : '',
        operationTimeIt: this.outboundCallTime ? this.outboundCallTime[1] : '',
        tagBaseList: [],
        tagProductList: [],
      };
      obj.tagBaseList = tagBaseList
      obj.tagProductList = tagProductList
      return obj
    },
    //表格数据
    visitRecordData() {
      let obj = this.data()
      baseAjax(api.selectCallRecordListToPage, obj, (res) => {
        if (res.code == statusCode.success) {
          let {valuePlus, currentPage, pageSize, totalPage, count} = res.data;
          this.visitRecordList = valuePlus;
          this.page.currentPage = currentPage;  //当前页
          this.page.pageSize = pageSize;  //每页条数
          this.page.totalPage = totalPage;  //总页数
          this.page.total = count;
          this.loading = false
        }
      })
    },
    //查询
    query() {
      this.loading = true
      this.page.currentPage = 1;
      this.visitRecordData()
    },
    //改变当前页码
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.visitRecordData()
    },
    //改变每页条数
    handlePageSize(pageSize) {
      this.page.pageSize = pageSize;
      this.visitRecordData();
    },
    //获取所有项目-项目联动->项目成员、项目标签
    getAllProductInfo() {
      let getReourceItem = {
        url: '/product/getAllProductInfo',
        method: 'POST'
      }
      baseAjax(getReourceItem, '', (res) => {
        if (res.code == statusCode.success) {
          this.projectList = res.data;
        }
      })
    },
    //根据多个产品ID获取所有相关代表-项目联动->项目成员、项目标签
    getRepNamebyProductId() {
      let getRepNamebyProductId = {
        url: '/representative/getRepNamebyProductId',
        method: 'POST'
      }
      baseAjax(getRepNamebyProductId, this.project, (res) => {
        if (res.code == statusCode.success) {
          this.projectMembersList = res.data
        }
      })
    },
    //查看项目标签-项目联动->项目成员、项目标签
    tag_product_info_list() {
      let a = {
        url: api.tag_product_info_list.url + '?productIds=' + this.project,
        method: api.tag_product_info_list.method
      }
      baseAjax(a, '', (res) => {
        if (res.code == statusCode.success) {
          this.itemLabellList = res.data
        }
      })
    },
    //获取资源表相应资源内容->拜访目的联动 - 拜访结果
    getReoureItem(type) {
      let getReourceItem = {
        url: '/resource/getReourceItem/' + type,
        method: 'GET',
      }
      baseAjax(getReourceItem, '', (res) => {
        if (res.code == statusCode.success) {
          if (type == 'purpose_type') {
            for (let data of res.data) {
              this.purposeOfTheVisitList.push({
                resourceValue: data.resourceValue,
                resourceItem: data.resourceItem,
                disabled: false,
              })
            }
          } else if (type == 'tag_base_type') {
            let list = res.data
          } else {
            this.visitResultsList = res.data;
          }
        }
      })
    },
    //查看基础标签
    tag_base_info() {
      let tag_base_info = {
        url: '/tag_base/tag_base_info',
        method: 'POST'
      }
      baseAjax(tag_base_info, {}, (res) => {
        if (res.code == statusCode.success) {
          let arr = [];
          res.data.tagBaseList.map((res) => {
            let data = {
              resourceValue: res.tagClassifyId,
              resourceItem: res.tagClassifyName,
            }
            arr.push(data)
          })
          let tag = this.unique(arr);
          tag.map((res2) => {
            let value = []
            res.data.tagBaseList.map((res1) => {
              if (res1.tagClassifyId == res2.resourceValue) {
                value.push(res1)
              }
            })
            res2.options = value
            this.basicLabelList.push(res2)
          })
        }
      })
    },
    //数组对象去重
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.resourceValue) && res.set(arr.resourceValue, 1));
    },
    //查看基础标签选项信息
    tag_base_option_list(id, tagName, tagType) {
      this.radioList = []
      let tag_base_option_list = {
        url: '/tag_base/tag_base_option_list?tagIds=' + id,
        method: 'GET'
      }
      baseAjax(tag_base_option_list, '', (res) => {
        if (res.code == statusCode.success) {

          if (tagType == 'checkbox') {
            let checkbox = {
              title: tagName,
              id: id,
              val: '',
              tagType: 'checkbox',
              list: []
            }
            res.data.map((res) => {
              if (res.tagType == 'checkbox') {
                checkbox.list.push(res)
              }
            })
            this.radioList.push(checkbox)
          }

          if (tagType == 'radio') {
            let radio = {
              title: tagName,
              id: id,
              val: '',
              tagType: 'radio',
              list: []
            }
            res.data.map((res) => {
              if (res.tagType == 'radio') {
                radio.list.push(res)
              }
            })
            this.radioList.push(radio)
          }

          if (tagType == 'number') {
            let number = {
              title: tagName,
              id: id,
              val: '',
              tagType: 'number',
              list: []
            }
            res.data.map((res) => {
              if (res.tagType == 'number') {
                number.list.push(res)
              }
            })
            this.radioList.push(number)
          }

          if (tagType == 'text') {
            let text = {
              title: tagName,
              id: id,
              val: '',
              tagType: 'text',
              list: []
            }
            res.data.map((res) => {
              if (res.tagType == 'text') {
                text.list.push(res)
              }
            })
            this.radioList.push(text)
          }
        }
      })
    },
    // 查看医生项目标签信息
    tag_product_option_list() {
      let a = {
        url: api.tag_product_option_list.url + '?tagIds=' + this.itemLabel,
        method: api.tag_product_option_list.method
      }
      baseAjax(a, '', (res) => {
        if (res.code == statusCode.success) {
        }
      })
    },
    //综合查询-拜访记录excel下载
    downloadEasyExcel() {
      this.disabled = true
      let obj = this.data()
      httpExcel(url.downloadEasyExcel, obj,).then((res) => {
        if (!res) return
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.href = url
        let date = this.getNowFormatDate()
        link.setAttribute('download', date + '.xlsx')
        document.body.appendChild(link)
        link.click()
        this.disabled = false
      })
    },
    //重置
    reset() {
      this.project = []
      this.doctor = ''
      this.numberSource = []
      this.purposeOfTheVisit = []
      this.isTtConnected = []
      this.startTime = ''
      this.endTime = ''
      this.outboundCallTime = ''
    },
    //查看录音
    show_recording(info) {
      this.audio.currentTime = '00:00:00';
      this.audio.duration = '00:00:00';
      this.audio.audio_slider = 0;
      this.audio.play = false;
      this.is_show_recording = true;
      this.recording_number = info.callId;
      this.recording_url = info.tapeUri;
    },
    //关闭录音弹框
    close_recording() {
      this.is_show_recording = false;
    },
    //改变播放按钮
    changePlay() {
      if (this.audio.play === false) {
        this.audio.play = true;
        this.play();
      } else {
        this.audio.play = false;
        this.pause();
      }
    },
    //播放录音
    play() {
      this.$refs.audio.play();
    },
    //暂停录音
    pause() {
      this.$refs.audio.pause();
    },
    //格式化进度条
    formatProcessToolTip(index) {
      index = parseInt(this.audio.duration / 100 * index);
      return formatTime(index);
    },
    //拖动进度条,改变当前时间
    changeCurrentTime(index) {
      this.audio.currentTime = parseInt(index / 100 * this.audio.duration);
    },
    //更新当前播放时间
    onTimeUpdate(val) {
      this.audio.currentTime = val.target.currentTime;
      this.audio.audio_slider = parseInt(this.audio.currentTime / this.audio.duration * 100);
      if (val.target.currentTime === val.target.duration) {
        this.audio.play = false;
      }
    },
    //录音总时长
    onLoadedMetaData(val) {
      this.audio.duration = val.target.duration;
    },
    //无录音下载提示
    download_recording_promit() {
      this.$alert('暂无可下载的录音', {
        dangerouslyUseHTMLString: true
      });
    },
    //时间
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    //获取医生基本信息
    getDoctorInfo(info) {
      let doctor_info = this.dealDoctorInfo(info);
      Cookies.set('doctor_info', this.EncryUtil.encryptByAES(JSON.stringify(doctor_info)), {expires: 24 * 60 * 60 * 1000});
      let data = {
        is_drawer: true,  //是否显示侧边弹框 true-显示 false-隐藏
        is_supplement: true   //是否显示补填信息按钮  true-显示  false-隐藏
      };
      bus.$emit('get_doctor_info', data);
    },
    //处理医生信息
    dealDoctorInfo(info) {
      let gender = '';
      if (info.doctorGender == 1) {
        gender = '男';
      } else if (info.doctorGender == 1) {
        gender = '女';
      }
      let doctor_info = {
        name: info.doctorName,
        position: info.techTitle,
        hospital: info.hospitalName,
        department: info.depart,
        sex: info.gender,
        project: [],
        doctorId: info.vrid,
        techTitle: info.techTitle,
        executeTitle: info.executeTitle,
        hcoProvince: info.province,
        hcoCity: info.city,
        // concat: info.doctorContact.split(',')
      };
      return doctor_info;
    },
    //展示所有的搜索条件
    showAllSearch() {
      this.is_show_all_search = true;
      this.is_show_fixed_search = false;
    },
    //展示固定的搜索条件
    showFixedSearch() {
      this.is_show_all_search = false;
      this.is_show_fixed_search = true;
    },
    //项目标签>下拉
    getChoiceItemLabellList(id, tagName, tagType) {
      this.choiceItemLabellList = []
      let getRepNamebyProductId = {
        url: '/tag_product/tag_product_option?tagId=' + id,
        method: 'GET'
      }
      baseAjax(getRepNamebyProductId, this.project, (res) => {
        if (res.code == statusCode.success) {
          if (tagType == 'radio') {
            let radio = {
              title: tagName,
              val: '',
              tagType: 'radio',
              list: []
            }
            res.data.map((res) => {
              if (res.tagId == id) {
                radio.list.push(res)
              }
            })
            this.choiceItemLabellList.push(radio)
          }

          if (tagType == 'checkbox') {
            let checkbox = {
              title: tagName,
              val: '',
              tagType: 'checkbox',
              list: []
            }
            res.data.map((res) => {
              if (res.tagId == id) {
                checkbox.list.push(res)
              }
            })
            this.choiceItemLabellList.push(checkbox)
          }

          if (tagType == 'number') {
            let number = {
              title: tagName,
              val: '',
              tagType: 'number',
              list: []
            }
            res.data.map((res) => {
              if (res.tagId == id) {
                number.list.push(res)
              }
            })
            this.choiceItemLabellList.push(number)
          }

          if (tagType == 'text') {
            let text = {
              title: tagName,
              val: '',
              tagType: 'text',
              list: []
            }
            res.data.map((res) => {
              if (res.tagId == id) {
                text.list.push(res)
              }
            })
            this.choiceItemLabellList.push(text)
          }
        }
      })
    },
  },
  //展示录音详情
  filters: {
    formatAudioTime(time) {
      return formatTime(time);
    }
  }
}
</script>

<style lang="less" scoped>
.customer {
  /deep/ .el-input.el-input--suffix.is-focus > .el-input__inner {
    border-color: #2A82E2;
  }

  /deep/ .el-input__inner:focus {
    border-color: #2A82E2 !important;
  }

  /deep/ .el-range-editor.is-active {
    border-color: #2A82E2 !important;
  }

  .visit_record_search {
    position: relative;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 36px;

    .blockMould {
      padding: 24px 16px 10px 43px;
      margin-bottom: 0;
      border-radius: 2px;

      /deep/ .el-input {
        .el-input__inner {
          height: 32px;
          background-color: #FFFFFF;
          border-radius: 2px;
          border: 1px solid #DDDFE6;
        }
      }

      .fixed_search {
        display: flex;

        .left, .center, .right {
          width: 100%;

          .search_list {
            display: flex;
            align-items: center;
            margin-bottom: 14px;

            .search_text {
              min-width: 70px;
            }

            .el-select {
              width: 100%;
            }
          }
        }

        .left, .center {
          margin-right: 51px;
        }
      }

      .show_search {
        .search_list {
          margin-right: 51px;
          align-items: center;
          margin-bottom: 14px;
          display: inline-block;

          .search_text {
            width: 70px;
          }

          .el-select, .el-input {
            width: 200px;
          }

          .el-date-editor {
            border-radius: 2px;
            border: 1px solid #DDDFE6;
          }
        }

        /*
                .left, .center, .right {
                  width: 100%;

                  .search_list {
                    display: flex;
                    width: 100%;
                    align-items: center;
                    margin-bottom: 14px;

                    .search_text {
                      min-width: 70px;
                    }

                    .el-select {
                      width: 100%;
                    }
                  }
                }

                .left, .center {
                  margin-right: 51px;

                  .call_duration {
                    .el-input {
                      margin-right: 4px;
                    }
                  }

                  .call_start_time {
                    min-width: 107.8%;
                    transform: translateX(-28px);

                    .search_text {
                      min-width: 98px;
                    }

                    .el-date-editor {
                      width: 79.9%;
                      border-radius: 2px;
                      border: 1px solid #DDDFE6;
                    }
                  }
                }

                .center {
                  max-width: 100%;
                  min-width: 31%;
                }*/
      }
    }

    /deep/ .el-button {
      width: 45px;
      height: 20px;
      display: flex;
      justify-content: center;
      color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 0 0 50px 50px;
      padding: 0;

      .el-icon-arrow-down {
        font-size: 17px;
        transform: translateY(-1px);
      }

      .el-icon-arrow-up {
        font-size: 17px;
        transform: translateY(-2px);
      }
    }

    .el-button:focus, .el-button:hover {
      color: rgba(0, 0, 0, 0.4);
      border-color: transparent;
      background-color: #fff;
    }
  }

  .visit_record_list {
    /deep/ .el-table {
      thead {
        tr {
          th:first-child {
            padding-left: 0;
          }
        }
      }

      tbody {
        tr {
          td {
            padding: 12px 0 14px 0;

            .cell {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 20px;

              .item {
                color: rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
      }
    }
  }

  .show_recording {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;

    .contain {
      width: 526px;
      height: 280px;
      background-color: #FFFFFF;
      border-radius: 4px;
      padding: 18px 25px 52px 32px;
      box-sizing: border-box;

      .title {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #202020;

        i {
          cursor: pointer;
        }
      }

      .content {
        padding-top: 45px;

        .audio_number {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
          margin-left: -345px;
        }

        .audio_content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .play_button {
            cursor: pointer;
            margin-bottom: 29px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .audio_slider {
            width: 100%;
            padding: 0 28px 0 28px;
            box-sizing: border-box;

            .audio_time {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #8998AC;
              margin-left: -4px;
            }

            /deep/ .el-slider {
              .el-slider__runway {
                height: 6px;
                background-color: rgba(221, 223, 230, 0.5);
                border-radius: 4px;
                margin: 12px 0 11px 0;

                .el-slider__button-wrapper {
                  .el-slider__button {
                    background-color: #409EFF;
                  }
                }

                .el-slider__bar {
                  background-color: #2A82E2;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
